{extend name="public/base"/} {block name="body"}
<style>
    .mui-row.mui-fullscreen>[class*="mui-col-"] {
        height: 100%;
    }

    .mui-col-xs-3,
    .mui-col-xs-9 {
        overflow-y: auto;
        height: 100%;
    }

    .mui-segmented-control .mui-control-item {
        line-height: 50px;
        width: 100%;
    }

    .mui-control-content {
        display: block;
    }

    .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
        background-color: #fff;
    }
    .mui-toast-container {
        bottom: 50%;
        z-index: 999999999999999999;
    }
    .mui-btn-block{
      padding: 5px;
      border: 1px solid #ccc !important;
      margin: 5px;
      -webkit-appearance: none;
    }
    .active .mui-icon{
      display: block !important;
    }
    .paylist.open{
          overflow-y: scroll;
    }

    .info-box{
      background-color: #3190e8;
      padding: .4rem .4rem;
      color:#fff;
    }
    .info-box .headimg {
      padding: 0.5rem 0;
    }
    .info-box .headimg img{

      font-size: 1.6rem;
      line-height: 1.6rem;
      width: 1.6rem;
      border-radius: 50%;
      height: 1.6rem;
      background: #fff;
      display: inline-block;
      vertical-align: middle;

    }
    .balance{
          color: #f90;
    }
    .hongbao{
          color: #ff5f3e;
    }
    .score{
            color: #6ac20b;
    }
    .mui-row {
      background-color: #fff;
    }
    .mui-row .mui-col-xs-6{
      padding: .453333rem 0 .293333rem;
      font-size: .32rem;
      line-height: .32rem;
      border-right: 1px solid #ddd;
    }

    .mui-row .mui-col-xs-6 span{
       font-size: .693333rem;
       line-height: .693333rem;
       font-weight: 700;
    }
</style>
<link rel="stylesheet" type="text/css" href="__PUBLIC__/xsd/css/checkout.css" />
<link rel="stylesheet" type="text/css" href="__PUBLIC__/xsd/css/mui.picker.min.css" />
<header class="mui-bar mui-bar-nav" >
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">个人信息</h1>
</header>
<div class="mui-content" style="    margin-bottom:60px;">
  <div class="info-box mui-text-center">
    <div class="headimg">
      <img src="{$Think.session.user.headimgurl}">
    </div>
    <h4>Hi.{$Think.session.user.nickname}  {notempty name="$Think.session.user.name" }(会员){/notempty}</h4>
  </div>
  <div class="mui-row mui-text-center">
    <div class="mui-col-xs-6">
       <p class="balance"> <span>{$Think.session.user.balance}</span>元 </p>
       <p >我的余额</p>
    </div>
    <div class="mui-col-xs-6">
      <p class="score"> <span>{$Think.session.user.integral}</span>分 </p>
      <p >我的积分</p>
    </div>
  </div>
<br />
  <div class="mui-card" style="padding:10px;">
    <form class="mui-input-group" method="post"  action="{:url('index/user/info')}">
    					<div class="mui-input-row">
    						<label>名字</label>
                		<input type="text" name="name" placeholder="请输入名字" value="{$info.name}">
    					</div>
    					<div class="mui-input-row">
    						<label>手机号</label>
                		<input type="number" name="phone" placeholder="请输入手机号" value="{$info.phone}">
    					</div>
    					<div class="mui-input-row">
    						<label>生日</label>
                		<input type="text" data-options='{"type":"date","beginYear":1940}' readonly {empty name="$info.birthday"} id="birthday"{/empty} name="birthday" placeholder="请选择生日" value="{$info.birthday}">
                    <input type="hidden"  name="birthday_monthday" value="{$info.birthday_monthday}">
    					</div>
            {notempty name="$info.birthday"}
            <div class="subsc"   style="line-height:30px;"><a >修改生日：关注客服微信</a> </div> 
            {/notempty}

              <div>

              		<button type="button" class="mui-btn mui-btn-primary sbt" onclick="return false;" style="width:100%;margin-top:20px;">确认</button>&nbsp;&nbsp;

              					</div>
    				</form>
  </div>
  <div style="    margin: 10px;">
    {$Think.config.infodec}
  </div>

</div>


{/block}
{block name="script"}
<script src="__PUBLIC__/xsd/js/mui.picker.min.js"></script>
<script type="text/javascript">


$(function(){
  $('#birthday').on('tap',function(){
    var $this = $(this);
    var optionsJson = this.getAttribute('data-options') || '{}';
    var options = JSON.parse(optionsJson);
    var picker = new mui.DtPicker(options);
    picker.show(function(rs) {
      console.log(rs);
      $this.val(rs.text)
      $("[name='birthday_monthday']").val(rs.m.text+rs.d.text)
      picker.dispose();
    });
  })
  $('.sbt').click(function(){
       var name = $.trim($('[name="name"]').val()),
           phone = $.trim($('[name="phone"]').val()),
           birthday = $.trim($('[name="birthday"]').val()),
           birthday_monthday = $.trim($('[name="birthday_monthday"]').val());
      if(!name){
        mui.toast('请输入名称')
        return;
      }
      if (!phone) {
           mui.toast("请输入手机号码！");
           return;
       } else if (!/^0?1[3|4|5|7|8|9]\d{9}$/.test(phone)) {
           mui.toast("你输入的手机号码不正确！");
           return;
       }
      if (!birthday) {
           mui.toast("请选择生日日期！");
           return;
       }

       $.post("{:url('index/user/info')}", {
           "name": name,
           "phone": phone,
           "birthday": birthday,
           "birthday_monthday": birthday_monthday
       }, function(data) {
          var zfurl = "{$Request.param.url}"
          mui.toast(data.msg)
          setTimeout(function() {
              window.history.back();location.reload();
          }, 2000);
       }, "json");
  })

})
</script>
{/block}
